<template>
  <el-dialog width="500px" :title="isdis? '编辑分组': '添加分组'" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
    <div>
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules">
        <el-form-item prop="typeName" label="分组名称">
          <el-input v-model="dialogForm.typeName" placeholder="请输入分组名称" />
        </el-form-item>
        <el-form-item prop="sortPower" label="分组排序">
          <el-input-number style="width: 100%;" v-model="dialogForm.sortPower" :min="1" :max="100000" placeholder="请输入分组排序" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitHandle">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import api from '../api'
import { successDeal, warningDeal } from '@/utils/utils'
export default {
  setup(props, context) {
    const dialogFormRef = ref(null)

    const state = reactive({
      isdis: false,
      dialogForm: {},
      dialogFormVisible: false,

      dialogFormRules: {
        typeName: [
          { required: true, message: '请输入分组名称', trigger: 'blur' },
        ],
        sortPower: [
          { required: true, message: '请输入分组排序', trigger: 'blur' },
        ],
      },
    })

    function dialogShow(data = {}, isdis = false) {
      state.isdis = isdis
      state.dialogForm = data
      state.dialogFormVisible = true
    }

    function dialogClose() {
      dialogFormRef.value && dialogFormRef.value.resetFields()
    }

    function submitHandle() {
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          if (state.isdis) {
            const obj = {
              typeName: state.dialogForm.typeName || null,
              sortPower: state.dialogForm.sortPower || null,
              id: state.dialogForm.id
            }
            api.haibaoTypeModify(obj).then(res => {
              if (res.code == '200') {
                successDeal(res.msg)
                context.emit('dialogClose')
                state.dialogFormVisible = false
              } else {
                warningDeal(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            const obj = {
              typeName: state.dialogForm.typeName || null,
              sortPower: state.dialogForm.sortPower || null,
            }
            api.haibaoTypeAdd(obj).then(res => {
              if (res.code == '200') {
                successDeal(res.msg)
                context.emit('dialogClose')
                state.dialogFormVisible = false
              } else {
                warningDeal(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          }
        }
      })
    }

    return {
      ...toRefs(state),
      dialogFormRef,
      dialogClose,
      submitHandle,
      dialogShow,
    }
  }
}
</script>

<style>
</style>